<template>
  <div class="enterprise-list">
    <el-row class="search-bar" :gutter="10">
      <el-col :span="6">
        <el-input v-model="requestData.name" placeholder="请输入企业名称" clearable />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-row v-if="!isEmpty" class="card-list" :gutter="20">
      <el-col v-for="enterprise in enterprises" :key="enterprise.id" :span="8">
        <el-card @click="toDetail(enterprise.id)" class="card c-p">
          <template #header>
            <div class="name ellipsis">{{ enterprise.name }}</div>
          </template>
          <div class="info">企业类型：{{ enterprise.type }}</div>
          <div class="info ellipsis">注册地址：{{ enterprise.registeredAddress }}</div>
          <div class="info">注册时间：{{ enterprise.establishmentTime }}</div>
          <div class="info">是否入驻：{{ enterprise.state ? '是' : '否' }}</div>
          <div class="info">
            是否认定为高企：{{ enterprise.hightechEnterprises === '1' ? '是' : '否' }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-empty v-if="isEmpty" description="没有符合条件的企业" />
    <el-pagination
      v-if="!isEmpty"
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      :page-sizes="[3, 6, 12, 24, 48, 96]"
      layout="sizes, prev, pager, next"
      :total="total"
      :page-size="requestData.size"
      v-model:current-page="requestData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { enterpriseList } from '@/api/enterpeise';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 跳转到企业详情
const router = useRouter();
const toDetail = (id: number) => {
  router.push({
    name: 'enterpriseDetail',
    query: {
      id,
    },
  });
};

const isEmpty = ref(false);

interface Enterprise {
  briefIntroduction: string;
  businessLicense: string;
  code: string;
  createBy: string;
  createTime: string;
  establishmentTime: null | string;
  funding: number;
  highTechEnterpriseCertificate: string;
  highTechEnterpriseNotice: string;
  hightechEnterprises: string;
  id: number;
  mail: string;
  name: string;
  otherMaterials: string[];
  registeredAddress: string;
  registeredCapital: string;
  representative: string;
  state: number;
  telephone: string;
  type: string;
  updateBy: string;
  updateTime: string;
}

// 分页
function handleSizeChange(val: number) {
  requestData.value.size = val;
  loadData();
}
function handleCurrentChange(val: number) {
  requestData.value.current = val;
  loadData();
}

onMounted(() => {
  loadData();
});

const requestData = ref({
  current: 1,
  size: 3,
  name: null,
});

const enterprises = ref<Enterprise[]>([]);
const total = ref(0);
function loadData() {
  enterpriseList({
    ...requestData.value,
    auditState: 1,
    name: requestData.value.name ? requestData.value.name : null,
  }).then((res: any) => {
    if (res.code === 200) {
      enterprises.value = res.data.records;
      total.value = res.data.total;
      if (res.data.total === 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
  });
}

function handleSearch() {
  loadData();
}
</script>

<style scoped lang="scss">
.enterprise-list {
    width: 100%;
  padding: 20px;
  .search-bar {
    margin-bottom: 20px;
  }

  .card-list {
    margin: 0 -10px;
  }

  .card {
    // padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    .name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .info {
      margin-top: 10px;
    }
  }
}
</style>
